<%@ page language="java" contentType="text/html;charset=UTF-8"
	pageEncoding="UTF-8" import="com.fps.web.model.*"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri='http://www.springframework.org/tags/form'%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 5 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%
String type = "";
if(null != session.getAttribute("LOGIN_SYS_USER_INFO")){
    type = ((BaseUser) session.getAttribute("LOGIN_SYS_USER_INFO")).getType();
}else{
	type= "";
}
%>
<head>
<meta charset="utf-8">
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<!--  1、 框架标签引入区 （start）-->
<!--  1、 框架标签引入区 （end）-->
<!--  2、 CSS声明区 （start）-->
<!--  2.0、引入CSS区 （start）-->
<link rel="stylesheet"
	href="<%=request.getContextPath() %>/other/layui/css/layui.css" />
<link rel="stylesheet"
	href="<%=request.getContextPath() %>/freeStyle/css/saber.css" />
<!--  2.0、 引入CSS区 （end）-->
<!--  2.1、本界面CSS区 （start）-->
<style>
.nodetext {
	font-size: 12px;
	font-family: SimSun;
	fill: #000000;
}

.linetext {
	font-size: 12px;
	font-family: SimSun;
	fill: #0000FF;
	fill-opacity: 0.0;
}
</style>
<!--  2.1、 本界面CSS区 （end）-->
<!--  2、 CSS声明区 （end）-->
<!--  3、JS声明区 （start）-->
<!--  3.0、 导入外部JS区 （start）-->
<script type="text/javascript"
	src="<%=request.getContextPath() %>/js/common/jquery-2.0.3.min.js"></script>
<script type="text/javascript"
	src="<%=request.getContextPath() %>/js/d3/d3.min.js"></script>
<!--  3.0、 导入外部JS区 （end）-->
<!--  3.1、 全局变量声明区 （start）-->
<script type="text/javascript">

</script>
<!--  3.1、 全局变量声明区 （end）-->
<!--  3.2、 初始化区 （start）-->
<script type="text/javascript">

</script>
<!--  3.2、 初始化区 （end）-->
<!--  3.3、 页面控制区 （start）-->
<script type="text/javascript">

</script>
<!--  3.3、 页面控制区 （end）-->
<!--  3.4、 事件区 （start）-->
<script type="text/javascript">

</script>
<!--  3.4、 事件区 （end）-->
<!--  3.5、 回调区 （start）-->
<script type="text/javascript">

</script>
<!--  3.5、 回调区 （end）-->
<!--  3.6、 业务逻辑区 （start）-->
<!--  3.6、 业务逻辑区 （end）-->

<!--  3、 JS声明区 （end）-->
<body class="body">
	<script>		   
		
		var width = 600;
		var height = 600;
		var img_w = 77;
		var img_h = 90;
		
		var svg = d3.select("body").append("svg")
								.attr("width",width)
								.attr("height",height);
		
		
		
		d3.json("<%=request.getContextPath() %>/web/dataview/relation.json",function(error,root){
			
			if( error ){
				return console.log(error);
			}
			
			var force = d3.layout.force()
							.nodes(root.nodes)
							.links(root.edges)
							.size([width,height])
							.linkDistance(200)
							.charge(-1500)
							.start();
							
			var edges_line = svg.selectAll("line")
								.data(root.edges)
								.enter()
								.append("line")
								.style("stroke","#ccc")
								.style("stroke-width",1);
								
			var edges_text = svg.selectAll(".linetext")
								.data(root.edges)
								.enter()
								.append("text")
								.attr("class","linetext")
								.text(function(d){
									return d.relation;
								});
			
								
			var nodes_img = svg.selectAll("image")
								.data(root.nodes)
								.enter()
								.append("image")
								.attr("width",img_w)
								.attr("height",img_h)
								.attr("xlink:href",function(d){
									return d.image;
								})
								.on("mouseover",function(d,i){
									//显示连接线上的文字
									edges_text.style("fill-opacity",function(edge){
										if( edge.source === d || edge.target === d ){
											return 1.0;
										}
									});
								})
								.on("mouseout",function(d,i){
									//隐去连接线上的文字
									edges_text.style("fill-opacity",function(edge){
										if( edge.source === d || edge.target === d ){
											return 0.0;
										}
									});
								})
								.call(force.drag);
			
			var text_dx = -20;
			var text_dy = 20;
			
			var nodes_text = svg.selectAll(".nodetext")
								.data(root.nodes)
								.enter()
								.append("text")
								.attr("class","nodetext")
								.attr("dx",text_dx)
								.attr("dy",text_dy)
								.text(function(d){
									return d.name;
								});
			
								
			force.on("tick", function(){
				
				//限制结点的边界
				root.nodes.forEach(function(d,i){
					d.x = d.x - img_w/2 < 0     ? img_w/2 : d.x ;
					d.x = d.x + img_w/2 > width ? width - img_w/2 : d.x ;
					d.y = d.y - img_h/2 < 0      ? img_h/2 : d.y ;
					d.y = d.y + img_h/2 + text_dy > height ? height - img_h/2 - text_dy : d.y ;
				});
			
				//更新连接线的位置
				 edges_line.attr("x1",function(d){ return d.source.x; });
				 edges_line.attr("y1",function(d){ return d.source.y; });
				 edges_line.attr("x2",function(d){ return d.target.x; });
				 edges_line.attr("y2",function(d){ return d.target.y; });
				 
				 //更新连接线上文字的位置
				 edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });
				 edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });
				 
				 
				 //更新结点图片和文字
				 nodes_img.attr("x",function(d){ return d.x - img_w/2; });
				 nodes_img.attr("y",function(d){ return d.y - img_h/2; });
				 
				 nodes_text.attr("x",function(d){ return d.x });
				 nodes_text.attr("y",function(d){ return d.y + img_w/2; });
			});
		});
		  
        </script>
</body>
</html>